<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        background-color: #ddd;
    }

    .this {
        width: 400px;
        height: 600px;
        display: flex;
        flex-wrap: wrap;
        padding: 5px;
        justify-content: space-between;
        margin: auto;
        overflow-y: scroll;
    }

    .this-info {
        margin-top: 10px;
        width: 190px;
        height: 280px;
        background-color: #fff;
        border-radius: 10px;
        padding: 20px 0;
    }

    .this-info>img {
        width: 150px;
        margin-left: 20px;
        border-radius: 10px;
    }

    .name {
        width: 150px;
        margin-top: 5px;
        font-weight: bolder;
        margin-left: 20px;
        height: 45px;
    }

    .moves {
        width: 160px;
        height: 30px;
        margin-left: 20px;
        display: flex;
        align-items: center;
        position: relative;
    }

    .money {
        font-size: 18px;
        font-weight: bold;
        color: rgb(255, 111, 0);
    }

    .money>span {
        font-size: 12px;
    }

    .move {
        margin-left: 5px;
        padding: 2px;
        font-size: 14px;
        border-radius: 5px;
        border: 1px solid orange;
        color: rgb(255, 111, 0);
    }
    .how{
        position: absolute;
        right:0px;
        padding: 2px;
        font-size: 12px;
        color: #ddd;
        border-radius: 15px;
        border: 1px solid #ddd;
    }
    h1{
        border-radius: 5px;
        width: 500px;
        padding: 10px;
        position: absolute;
        left:10px;
        background-color: #fff;
    }
</style>

<body>
    <div id="app">
        
        <chind-1></chind-1>
    </div>

    <script src="./vue/vue.js"></script>
    <template id="chindx">
        
        <div class="this">
            <h1>{{heads}}</h1>
            <div class="this-info" v-for="(items,index) in datalist">
                <img :src="'./imgs/' + index + '.jpg'" alt="">

                <div class="name" @click="find(index)">{{items.name}}</div>

                <div class="moves">
                    <p class="money">￥{{items.money}}<span>起</span></p>
                    <p class="move">{{items.move}}</p>
                    <p class="how">看相似</p>
                </div>

            </div>
        </div>
    </template>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    datalist: [
                        {
                            name: '小米11 Ultra,开启影像新时代',
                            
                        },
                        {
                            name: '智能定时|用电统计|过载保护',
                            
                        },
                        {
                            name: '小身材也有大智慧',
                            
                        },
                        {
                            name: 'RedMi Note 9 4G 6000MA大电量',
                            
                        },
                        {
                            name: '青年‘无须’新选择',
                            
                        },
                        {
                            name: '全面屏更多可能',
                           
                        },
                        {
                            name: '5号彩虹电池(10粒),无汞无锡',
                          
                        },
                        {
                            name: '小米插线板 5孔位,过载断电保护',
                            
                        },
                    ],
                     heads:''
                }
            },
            components: {
                'chind-1': {
                    template: '#chindx',
                    //props:(datalist),
                    data() {
                        return {
                            datalist: [
                                {
                                    name: '小米11 Ultra,开启影像新时代',
                                    money: 5999,
                                    move: '上新'
                                },
                                {
                                    name: '智能定时|用电统计|过载保护',
                                    money: 49,
                                    move: ''
                                },
                                {
                                    name: '小身材也有大智慧',
                                    money: 49,
                                    move: '包邮'
                                },
                                {
                                    name: 'RedMi Note 9 4G 6000MA大电量',
                                    money: 999,
                                    move: '满减'
                                },
                                {
                                    name: '青年‘无须’新选择',
                                    money: 99,
                                    move: ''
                                },
                                {
                                    name: '全面屏更多可能',
                                    money: 229,
                                    move: '上新'
                                },
                                {
                                    name: '5号彩虹电池(10粒),无汞无锡',
                                    money: 9.9,
                                    move: ''
                                },
                                {
                                    name: '小米插线板 5孔位,过载断电保护',
                                    money: 39,
                                    move: ''
                                },
                            ],
                            heads:''
                        }
                    },

                    methods: {
                        find(index){
                            
                            let over=this.$parent.datalist[index].name;
                            console.log(over)
                            
                            this.heads=over
                        }
                    }
                },
            },

        })
    </script>
</body>

</html>